<template>
  <el-dialog title="法定节假日日历" :visible.sync="visible" v-if="visible" width="40%" append-to-body v-dialogDrag :close-on-click-modal="false">
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <div :class="['date-cell', isHoliday(date) ? '' : 'workday']" style=";margin-top: 0.125rem">
          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
        </div>
        <div style="text-align: center;margin-top: 0.125rem">
          {{isHoliday(date)?'休':'班'}}
        </div>
      </template>
    </el-calendar>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import {listHolidayCollect} from "@/api/oa/holidayCollect";

export default {
  name: "fullcalendar",
  data() {
    return {
      date: null,
      value: new Date(),
      visible:false,
      holidayList:[],
    }
  },
  methods: {
      getHoliday(){
        listHolidayCollect().then(res=>{
          if (res) {
            let data = res.rows;
            this.holidayList=data.map(item => {
              return item.holidayDate;
            })
          }
        })
      },
    isHoliday(date){
      let time = this.formatDate(date, 'yyyy-MM-dd')
      console.log(time)
      if (this.holidayList.indexOf(time)!=-1){
        return true;
      }else {
        return false;
      }
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
        }
      }
      return fmt
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length)
    }

  },
  mounted() {
    this.getHoliday();
  }
}
</script>

<style scoped>
.is-selected {
  color: #1989FA;
}
.date-cell {
  text-align: center;
  line-height: 100%;

}

.workday {
  color: #1989FA;
}
</style>
